<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端框架学习</title>
    <link rel="stylesheet" href="../../layui/css/layui.css"   media="all">
    <script src="../../layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <table id="tab" class="layui-table"></table>
        </div>
    </div>
</div>


    <script>

        // layui.use(组件名称 ,fucntion (){

        // });
        layui.use(['table'],function (){
            //独立的layui组件
            let table = layui.table;
            //render 渲染方法 (参数) 是object {}
            table.render({
                elem: '#tab'
                //后台的地址 springboot+mp 的一个getmapping方法
                //跨域的问题
                ,url:'http://localhost:8081/ruleManager/layuirulepage'
                //通过? queryStrnig 传递参数
                ,where: {
                    orgId: '116821'
                }
                //通过requesthead传递参数
                ,headers: {token: 'BF14600551D72E393B38CDE1A6710721'}
                // 开启分页
                ,page:true
                ,cols:[[
                    // field：后台传递给前台的列名
                    // title 表格当中显示的列名
                    {field:'ruleid', width:80, title: '规则编号', sort: true}
                    ,{field:'rulename', width:280,title: '规则名称', sort: true}
                    ,{field:'ruledescription',width:280,title: '规则描述', sort: true}
                    ,{field:'rulecode',width:280,title: '规则编码', sort: true}
                    ,{field:'rulepriority',width:280,title: '优先事项', sort: true}
                    ,{field:'risklevel',width:280,title: '水平等级', sort: true}
                    ,{field:'rulesql',width:280,title: '规则sql', sort: true}
                    ,{field:'satus',width:280,title: '规则状态', sort: true}
                    ,{field:'regexp',width:280,title: '表达式', sort: true}
                    ,{field:'memo',width:280,title: '备忘录', sort: true}
                    ,{field:'inruledb',width:280,title: '对应的子库', sort: true}
                    ,{field:'tips',width:280,title: '提示', sort: true}
                    ,{field:'orgid',title: '组织编码', sort: true}
                    ,{field:'connectionstrings',width:280,title: '连接串', sort: true}
                    ,{field:'runstatus',title: '运行状态', sort: true}
                    ,{field:'staffid',title: '人员编号', sort: true}
                    ,{field:'reportsql',title:'导出sql', sort: true}
                ]]
            });
        });

    </script>
</body>
</html>